<template>
  <div>
    <Col :lg="24" :md="24">
    <Card class="warp-card" dis-hover>
      <Row justify="space-between" type="flex">
        <Col>
          <Input
            placeholder="子任务编号"
            style="width: 200px;"
            v-model="searchForm.taskCode"
          />
          <DatePicker type="date"  placeholder="任务完成时间" :capture="false" @on-change="searchForm.completionTime=$event" style="width: 200px;margin-left:20px;"
            v-model="searchForm.completionTime"></DatePicker>
          <Button
            @click="searchData" icon="md-search"
            style="margin-left: 20px;"
            type="primary"
            v-privilege="'search-sub-task'"
          >查询
          </Button>
          <Button
            @click="clearSearch"
            style="margin-left: 20px;"
            icon="md-refresh"
            type="default"
            v-privilege="'search-sub-task'"
          >重置
          </Button>
          <Button
            @click="exportData"
            style="margin-left: 20px;"
            icon="md-arrow-round-down"
            type="default"
            v-privilege="'export-subTask'"
          >导出
          </Button>
        </Col>
      </Row>
      <!-- Form 搜索按钮区 end -->
      <Row style="padding-top:10px; ">
        <Col :lg="24" :md="24">
          <Table :columns="columns" :data="data" :loading="isShowTablesLoading" ref="tablesMain"></Table>
        </Col>
      </Row>
      <Row class="page" justify="end" style="position: relative;margin-top: 10px;" type="flex">
        <Page
          :current="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          :total="totalPage"
          @on-change="changePage"
          show-total
          show-elevator
        ></Page>
      </Row>
    </Card>
    <SubTaskReport ref="subTaskReport"></SubTaskReport>
    <!-- Modal 添加部门弹窗 end -->
    </Col>
  </div>
</template>

<script>
import { subTaskApi } from '@/api/sub-task';
import SubTaskReport from '../sub-task-report/sub-task-report.vue';
export default {
  name: 'SubTaskManage',
  components: {
    SubTaskReport
  },
  props: {},
  data() {
    return {
      isShowPage: true,
      searchValue: '',
      isShowEditModal: false,
      isShowAddModal: false,
      // table是否Loading
      isShowTablesLoading: true,
      isShowSaveLoading: true,
      isShowUpdateLoading: true,
      totalPage: 0,
      // table表头
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '子任务编号',
          key: 'taskCode'
        },
        {
          title: '电芯编号',
          key: 'electricCoreCode',
          width: 200
        },
        {
          title: '电芯型号',
          key: 'electricCoreType'
        },
        {
          key: 'completionTime',
          width: 160,
          title: '任务完成时间',
          align: 'left'
        },
         {
          key: 'assigneeName',
          width: 160,
          title: '执行人',
          align: 'left'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          className: 'action-hide',
          render: (h, params) => {
            let buttons = [
              {
                  title: '报表',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'search-subTask-report'
                    }
                  ],
                  action: () => {
                    this.showSubTaskReport(params.row.id)
                  }
                },
                {
                  title: '重置',
                  directives: [
                    {
                      name: 'privilege',
                      value: 'reset-subTask'
                    }
                  ],
                  action: () => {
                    this.resetTask(params.row.id, params.row.taskCode);
                  }
                }
            ]
            if (params.row.status === '3') {
              buttons.push({
                title: '撤销归档',
                directives: [
                  {
                    name: 'privilege',
                    value: 'cancel-subTask-archive'
                  }
                ],
                action: () => {
                  this.cancelArchive(params.row.id, params.row.taskCode);
                }
              })
            }
            return this.$tableAction(h, buttons);
          }
        }
      ],
      // table数据
      data: [],
      searchForm: {
        mainTaskId:'',
        taskCode:'',
        completionTime: '',
        pageNum: 1,
        pageSize: 10,
        searchCount: true,
        sort: false
      },
      searchFormInt: {},
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
    this.searchForm.mainTaskId = this.$store.state.task.mainTaskId;
  },
  mounted() {
    Object.assign(this.searchFormInt, this.searchForm);
    this.getSubTaskByPage();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeRouteUpdate (to, from, next) {},
  updated() {
    this.searchForm.mainTaskId = this.$store.state.task.mainTaskId;
  },
  beforeDestroy() {},
  destroyed() {},
  activated(){
    if (this.$route.meta.isFresh) {
      this.getSubTaskByPage();
    }else{}
    this.$route.meta.isFresh = false;//记得这里一定要设置一下false。
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == 'MainTaskManage') {
       to.meta.isFresh = true;
    }
    next();
  },
  methods: {
    async getSubTaskByPage() {
      try {
        this.isShowTablesLoading = true;
        this.isShowPage = true;
        let result = await subTaskApi.getSubTaskByPage(this.searchForm);
        this.isShowTablesLoading = false;
        let datas = result.data;
        this.data = datas.list;
        this.totalPage = datas.total;
      } catch (e) {
        this.isShowTablesLoading = false;
        console.error(e);
      }
    },
    // 页码改变
    changePage(pageNum) {
      this.searchForm.pageNum = pageNum;
      this.getSubTaskByPage();
    },
    // 改变每页显示数据条数
    changePageSize(pageSize) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = pageSize;
      this.getSubTaskByPage();
    },
     showSubTaskReport(subTaskId) {
      this.$refs.subTaskReport.showModal(subTaskId);
    },
    // 搜索
    searchData() {
      this.pageNum = 1;
      this.getSubTaskByPage();
    },
    //导出
    exportData(){
      let selectedList = this.$refs.tablesMain.getSelection();
      if(selectedList.length == 0){
        this.$Message.info('请勾选一行数据进行导出');
        return;
      }
      if(selectedList.length >1){
        this.$Message.info('只能单选！');
        return;
      }
      this.exportSubTask(selectedList[0].id);
    },
    // 重置
    clearSearch() {
      Object.assign(this.searchForm, this.searchFormInt);
      this.getSubTaskByPage();
    },
    // 新增部门
    validateAndAddDepartment() {
      try {
        this.$refs['saveRef'].validate(valid => {
          this.isShowSaveLoading = true;
          if (valid) {
            this.addDepartment();
          } else {
            this.isShowSaveLoading = false;
            this.$nextTick(() => {
              this.isShowSaveLoading = true;
            });
          }
        });
      } catch (e) {
        console.error(e);
      }
    },
    // 重置任务
    async resetTask(id, taskCode) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否重置任务&nbsp;' + taskCode + '？</p>',
        onOk: () => {
          subTaskApi.resetSubTask(id)
            .then(res => {
              if (res.code === 1) {
                this.$Message.info('任务重置成功');
              }
            })
        },
        onCancel: () => {
        }
      });
    },
    // 导出
    async exportSubTask(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否导出勾选任务&nbsp;？</p>',
        onOk: () => {
          subTaskApi.exportSubTaskInfo(id)
            .then(res => {
              this.$Message.info('任务导出成功');
            })
        },
        onCancel: () => {
        }
      });
    },
    // 撤销归档
    async cancelArchive(id, taskCode) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否撤销任务归档&nbsp;' + taskCode + '？</p>',
        onOk: () => {
          subTaskApi.cancelSubTaskArchive(id)
            .then(res => {
              if (res.code === 1) {
                this.getSubTaskByPage();
                this.$Message.info('任务撤销归档成功');
              }
            })
        },
        onCancel: () => {
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
